<template>
    <div class="balance-page">
        <back title="余额">
            <!-- <button type="button" class="bill" @click="$router.push(`/bill`)">账单</button> -->
        </back>
        <div class="balance-content">
            <div class="top">
                <div class="smin-title">可用余额</div>
                <div class="balance-number">{{balance || '0.00'}}</div>
            </div>
            <div class="bottom">
                <button type="button" class="cash" :style="{'background-color': balance < 1 ? '#999' : ''}" @click="cash">提现</button>
                <button type="button" class="recharge" @click="$router.push('/recharge')">充值</button>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
.balance-page{
    padding-top 50px
    background #f4f4f4
    .bill{
        position absolute
        top 15px
        right 10px
        font-size 14px
    }
    .balance-content{
        .top{
            background-image: linear-gradient(to right , #3b79e7, #3563db);
            text-align center
            color #ffffff
            padding 30px 0
            .smin-title{
                font-size 14px
                margin-bottom 15px
            }
            .balance-number{
                font-size 24px
                color #ffc600
            }
        }
        .bottom{
            margin-top 50px
            text-align center
            button{
                width 40%
                height  40px
                color #fff
                border 0
                border-radius 5px
                margin 0 auto
                font-size 16px
                outline none
                background-image: linear-gradient(to bottom , #0392b7, #3563db);
                &.cash{
                    margin-right 10px
                }
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return {
            balance:'0.00'
        }
    },
    created(){
        this.myBalance();
    },
    methods:{
        myBalance(){
            this.$http.get(`/MyInfo/myBalance`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.balance = res.data.myBalance
                }
            })
        },
        cash(){
            if(this.balance > 1){
                this.$router.push('/cash')
            }
        }
    }
}
</script>
